<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import TaskItem from './TaskItem.vue';
import { tasks, isLoading, initWebSocket, createNewTask, startTasks, closeWebSocket } from './WebSocketService';

const taskInput = ref('');

// 初始化WebSocket连接
onMounted(() => {
  initWebSocket();
});

// 组件卸载时关闭WebSocket连接
onUnmounted(() => {
  closeWebSocket();
});

// 创建新任务
const addTask = async () => {
  if (taskInput.value.trim()) {
    try {
      await createNewTask(taskInput.value);
      // 不清空输入框，根据项目描述，用户可能需要修改任务描述后重新提交
    } catch (error) {
      console.error('创建任务失败:', error);
    }
  }
};

// 更新任务
const updateTask = (updatedTask: any) => {
  const index = tasks.value.findIndex(task => task.id === updatedTask.id);
  if (index !== -1) {
    tasks.value[index] = { ...tasks.value[index], ...updatedTask };
  }
};

// 开始执行任务
const executeAllTasks = async () => {
  try {
    await startTasks();
  } catch (error) {
    console.error('执行任务失败:', error);
  }
};
</script>

<template>
  <div>
    <div class="task-input-wrapper">
      <div class="task-input-container">
        <input 
          type="text" 
          v-model="taskInput" 
          placeholder="请输入任务描述" 
          class="task-input"
          @keyup.enter="addTask"
          :disabled="isLoading"
        />
        <button @click="addTask" class="add-task-btn" :disabled="isLoading">新建任务</button>
      </div>
    </div>
    
    <div v-if="isLoading" class="loading-indicator">
      <div class="spinner"></div>
      <p>正在处理任务请求...</p>
    </div>
    
    <div v-else class="task-list-wrapper">
      <div class="task-list">
        <div v-if="tasks.length === 0" class="empty-state">
          <p>暂无任务，请创建新任务</p>
        </div>
        <TaskItem 
          v-else
          v-for="task in tasks" 
          :key="task.id" 
          :task="task"
          @update:task="updateTask"
        />
      </div>
      
      <div v-if="tasks.length > 0" class="execute-btn-container">
        <button @click="executeAllTasks" class="execute-btn">开始执行</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.task-input-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.task-input-container {
  width: 1080px;
  display: flex;
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.add-task-btn {
  margin-left: 10px;
  padding: 60px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.add-task-btn:hover {
  background-color: #45a049;
}

.task-list-wrapper {
  width: 1080px;
  display: flex;
  justify-content: center;
}

.task-list {
  width: 70%;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100%;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 50px;
  color: #666;
}

.execute-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}

.execute-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 200px;
}

.execute-btn:hover {
  background-color: #45a049;
}
</style>